
if<template>
	<view class="tyleak">
		<Hearder :name="'体验专区'"></Hearder>
		<u-transition :show="show">
			<view v-if="loading">
				<u-skeleton
					rows="1"
					:title="false"
					:rowsHeight="['300rpx']"
					:rowsWidth="['100%']"
					:loading="loading"
					animate
				></u-skeleton>
			</view>
			<view v-if="!loading" style="width: 100%;">
				<u-transition :show="show">
					<image :src="baseinfo.leaky_img" class="cont_img" mode="widthFix" v-if="type==2"></image>
					<image :src="baseinfo.experience_img" class="cont_img" mode="widthFix" v-if="type==3"></image>
				</u-transition>
			</view>
			<view class="conent">
				<view class="showtime">{{baseinfo.day_time}}  {{baseinfo.week}}</view>
				<view class="shop_list">
					<view class="every" style="margin-top: 50rpx;" v-if="loading" v-for="item in 6">
						<view class="cont_center">
							<u-skeleton
								rows="1"
								:title="false"
								:rowsHeight="['335rpx']"
								:rowsWidth="['335rpx']"
								:loading="loading"
								animate
							></u-skeleton>
						</view>
						<view class="every_bot">
							<view class="title">
								<u-skeleton
								rows="1"
								:title="false"
								:rowsHeight="['50rpx']"
								:rowsWidth="['100%']"
								animate
								:loading="loading"></u-skeleton>
							</view>
							<view class="bot-con">
								<u-skeleton
								rows="1"
								:title="false"
								:rowsHeight="['50rpx']"
								:rowsWidth="['40%']"
								animate
								:loading="loading"></u-skeleton>
							</view>
						</view>
					</view>
					<view class="every" v-if="!loading" v-for="(item,index) in list" :key="item.goods_id" @click="$u.throttle(ljsnap(item.goods_id,item.is_order,item.order_id), 1000)">
						<u-transition :show="show">
							<view class="topimg">
								<image :src="item.goods_image"></image>
								<view class="null" v-if="item.is_order==2">
									<image src="/static/images/null.png"></image>
								</view>
							</view>
						</u-transition>
						<view class="every_bot">
							<view class="title">{{item.goods_name}}</view>
							<view class="bot-con">
								<view class="price-con">￥{{item.goods_min_price}}</view>
								<!-- <view class="status" v-if="baseinfo.end_time>baseinfo.new_time && baseinfo.new_time<baseinfo.start_time">等待抢购</view>
								<view class="status" v-else-if="baseinfo.end_time>baseinfo.new_time && baseinfo.new_time>=baseinfo.start_time"
								style="background: #FF513A;color: #fff;">立即抢购</view>
								<view class="status" v-else>已结束</view> -->
								<view class="status" style="background: #FF513A;color: #fff;">立即抢购</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nidata" v-if="list.length==0 && !loading">
					<image src="../../static/images/noimg.png"></image>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</u-transition>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				type:2, //2捡漏  3体验
				list:[],
				page:1,
				loadMoreText: "加载中...",
				showLoadMore: false,
				show: true,
				loading: true,
				showLogin: false,
				baseinfo:{}
			}
		},
		onLoad(options) {
			this.type = options.type
			if(this.type==2){
				uni.setNavigationBarTitle({
				　　title: '捡漏专区'
				})
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getinit()
			this.request('/goods/getSpecialarea').then(res => {
				if (res.data.code == -500) {
					this.showLogin = true
				}
				if(res.data.code==1){
					this.baseinfo = res.data.data
				}
				this.loading = false;
			})
		},
		onReachBottom() {
			this.page = this.page + 1
			if (this.page > this.last_page) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/loot/getCategoryGoodsList',{
					specialarea_id:this.type,
					page:this.page
				}).then(res => {
					if(res.data.code==1){
						this.list = this.list.concat(res.data.data.list)
						this.last_page = res.data.data.total_page
					}
					this.loading = false;
				})
			},
			ljsnap(goods_id,is_order,order_id){
				if(is_order!=2){
					this.request('/order/toAddOrder',{
						order_id:order_id,
						specialarea_id:this.type,
						goods_id:goods_id
					}).then(res => {
						if(res.data.code==1){
							uni.redirectTo({
								url:'lootsubmit?id='+goods_id+'&order_id='+res.data.data
							})
						}else{
							this.$tip(res.data.msg)
						}
					})
				}
			},
			todetail(goods_id,is_order,order_id){
				if(is_order!=2){
					uni.navigateTo({
						url:'/pages/loot/lootdet?id='+goods_id+'&order_id='+order_id
					})
				}
			},
			loginhidden(data) {
				this.showLogin = data
			}
		}
	}
</script>

<style scoped lang="scss">
	.tyleak{
		min-height: 100%;
		background: #F8F8F8;
		.cont_img{
			width: 100%;
		}
		.conent{
			position: relative;
			margin-top: -140rpx;
			.showtime{
				font-size: 26rpx;
				color: #FFE8C6;
				text-shadow: 5rpx 10rpx 20rpx rgba(218,48,49,0.75);
				margin-left: 5%;
			}
			.shop_list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 4% 30rpx;
				margin-top: 110rpx;
				.every{
					overflow: hidden;
					width: 335rpx;
					margin-top: 22rpx;
					border-radius: 10rpx;
					background: #fff;
					.cont_center{
						width: 100%;
						height: 335rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.topimg{
						position: relative;
						height: 335rpx;
						image{
							width: 100%;
							height: 100%;
						}
						.null{
							position: absolute;
							top: 0;
							width: 100%;
							height: 100%;
							background: rgba(0,0,0,.5);
							image{
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%,-50%);
								width: 177rpx;
								height: 151rpx;
							}
						}
					}
					.every_bot{
						padding: 0 20rpx;
						.title{
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp:2;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
							/* autoprefixer: on */
							line-height: 36rpx;
							font-size: 28rpx;
							margin-top: 20rpx;
							height: 70rpx;
						}
						.bot-con{
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx 0;
							.price-con{
								color: $uni-text-color;
								font-weight: 800;
								margin-left: -4rpx;
							}
							.status{
								width: 140rpx;
								height: 50rpx;
								background: #eee;
								font-size: 24rpx;
								border-radius: 50rpx;
								line-height: 50rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>